<template>
  <el-dialog :title="modelTitle" width="30%" :visible.sync="visible" @close="dialogClose">
    <el-form ref="form" :model="form" class="dialog-form" label-position="right" label-width="120px">
      <el-upload
        ref="upload"
        :file-list="fileList"
        :action="self.upload.img.url"
        list-type="picture-card"
        :multiple="false"
        :limit="1"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="uploadSuccess"
        :on-exceed="gobeyond"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="visible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'PurEceiving',
  props: {
    value: {
      type: String,
      default: ''
    },
    self: {
      type: Object,
      default: () => { return {} }
    },
    // 按钮操作类型
    btnOptType: {
      type: String,
      default: ''
    },
    modelTitle: {
      type: String,
      default: '请上传凭证'
    }
  },
  data() {
    return {
      visible: false,
      form: {
        credentials: []
      },
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      apiUrl: ''
    }
  },
  created() {

  },
  methods: {
    show(type) {
      this.form.credentials = []
      this.visible = true
      var url = this.self.page.router.remoteUrl
      if (type === 'delivery') { // 发货
        url = url + 'shipments'
      } else if (type === 'harvest') { // 收获
        url = url + 'receiving'
      } else if (type === 'settlement') { // 结算
        url = url + 'complete'
      }
      this.apiUrl = url
    },
    submit() {
      const that = this
      that.form.orderId = that.value
      console.log(that.form)
      if (that.form.credentials.length < 1) {
        that.$message.error('请上传凭证')
        return
      }
      console.log('--------------')
      console.log(that.form.credentials)
      that.form.credentials = JSON.stringify(that.form.credentials)
      const loading = that.$loading()
      that.self.service.post(this.apiUrl, that.form).then(res => {
        loading.close()
        if (res.code !== 200) {
          that.$message.error(res.message)
          return
        }
        that.$message.success('操作成功!')
        that.visible = false
        that.$refs.upload.clearFiles()
        that.self.reload(true)
      }).catch((e) => {
        loading.close()
      })
    },
    // 上传图片
    uploadSuccess(response, file, fileList) {
      console.log(response)
      console.log(file)
      console.log(fileList)
      if (response.code !== 200) {
        this.$message.error(response.message)
        return
      }
      this.form.credentials.push(response.data)
      console.log(this.form.credentials)
    },
    // 移除图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 文件超出个数限制时的钩子
    gobeyond() {
      this.$message.error('上传文件超出限制')
    },
    // 监听弹出层关闭
    dialogClose() {
      this.fileList = []
    }
  }
}
</script>
